<link rel="import" href="../polymer/polymer.html">
<link rel="import" href="../tf-imports/lodash.html">

<!--
tf-image-loader loads an individual image from the TensorBoard backend.

Right now it always loads the most recent image. We should add support in the
future for loading older images.
-->
<dom-module id="tf-image-loader">
  <style>
  :host {
    display: block;
  }
  img {
    width: 100%;
    height: 100%;
    image-rendering: pixelated;
    border: 1px solid #555;
  }
  </style>
  <template>
    <template is="dom-if" if="[[imageUrl]]">
      <img src="[[imageUrl]]" on-error="reload">
    </template>
  </template>
  <script>
    Polymer({
      is: "tf-image-loader",
      properties: {
        run: String,
        tag: String,
        imagesGenerator: Function,
        imageUrl: String,
      },
      reload: function() {
        var _this = this;
        this.imageUrl = ""; // force reload
        this.imagesGenerator(this.tag, this.run).then(function(metadatas) {
          var last_metadata = _.last(metadatas);
          _this.imageUrl = last_metadata.url;
        });
      },
      ready: function() {
        // Need to test so that it will not error if it is constructed w/o
        // all properties (so that it's possible to use stub to mock it out)
        if (this.run != null && this.tag != null && this.imagesGenerator != null) {
          this.reload();
        }
      },
    });
  </script>
</dom-module>
